{% if en %}
<div role="tabpanel" class="tab-pane config-section" id="ctftime">
    <form method="POST" autocomplete="off" class="w-100">
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link active" href="#start-date" aria-controls="start-date" role="tab" data-toggle="tab">
                    Start Time
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#end-date" aria-controls="end-date" role="tab" data-toggle="tab">
                    End Time
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#freeze-date" aria-controls="freeze-date" role="tab" data-toggle="tab">
                    Freeze Time
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="start-date">
                <div class="row" id="start-date">
                    <div class="col-md-12">
                        <p>This is the time when the competition will begin. Challenges will automatically
                            unlock and users will be able to submit answers.</p>
                        <sub class="text-muted text-right mb-3">* All time fields required</sub>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="start-month">Month:</label>
                        <input class="form-control start-date" id='start-month' min="0" max="12"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="start-day">Day:</label>
                        <input class="form-control start-date" id='start-day' min="0" max="31"
                               type='number'>
                    </div>

                    <div class="form-group col-md-3">
                        <label for="start-year">Year:</label>
                        <input class="form-control start-date" id='start-year' type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="start-hour">Hour:</label>
                        <input class="form-control start-date" id='start-hour' min="0" max="23"
                               type='number'>
                    </div>

                    <div class="form-group col-md-3">
                        <label for="start-minute">Minute:</label>
                        <input class="form-control start-date" id='start-minute' min="0" max="59"
                               type='number'>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="start-timezone">Timezone:</label>
                        <select class="form-control custom-select start-date" id="start-timezone">
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="start-local">Local Time:</label>
                        <input class="form-control" id='start-local' type='text'
                               placeholder="Start Date (Local Time)" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="start-zonetime">Timezone Time:</label>
                        <input class="form-control" id='start-zonetime' type='text'
                               placeholder="Start Date (Timezone Time)" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label>UTC Timestamp:</label>
                        <input class="form-control" id='start' name='start' type='number'
                               placeholder="Start Date (UTC timestamp)"
                               {% if start is defined and start != None %}value="{{ start }}"{% endif %} readonly>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="end-date">
                <div class="row" id="end-date">
                    <div class="col-md-12">
                        <p>This is the time when the competition will end. Challenges will automatically
                            close and users won't be able to submit answers.</p>
                        <sub class="text-muted text-right mb-3">* All time fields required</sub>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-month">Month:</label>
                        <input class="form-control end-date" id='end-month' min="0" max="12"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-day">Day:</label>
                        <input class="form-control end-date" id='end-day' min="0" max="31"
                               type='number'>
                    </div>

                    <div class="form-group col-md-4">
                        <label for="end-year">Year:</label>
                        <input class="form-control end-date" id='end-year' type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-hour">Hour:</label>
                        <input class="form-control end-date" id='end-hour' min="0" max="23"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-minute">Minute:</label>
                        <input class="form-control end-date" id='end-minute' min="0"
                               max="59" type='number'>
                    </div>

                    <div class="form-group col-md-12">
                        <div class="form-check pl-0">
                            <label>
                                <input id="view_after_ctf" name="view_after_ctf" type="checkbox" {% if view_after_ctf %}checked{% endif %}>
                                View After CTF
                                <small class="form-text text-muted">
                                    Allows challenges to be viewed after the End Time, however no new submissions will be recorded.<br>
                                    For participants to be able to submit after End Time but not alter the scoreboard, configure Freeze Time to be your End Time.
                                </small>
                            </label>
                        </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end-timezone">Timezone:</label>
                        <select class="form-control custom-select end-date" id="end-timezone">
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end-local">Local Time:</label>
                        <input class="form-control" id='end-local' type='text'
                               placeholder="End Date (Local Time)" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end-zonetime">Timezone Time:</label>
                        <input class="form-control" id='end-zonetime' type='text'
                               placeholder="End Date (Timezone Time)" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end">UTC Timestamp:</label>
                        <input class="form-control" id='end' name='end' type='number'
                               placeholder="End Date (UTC timestamp)"
                               {% if end is defined and end != None %}value="{{ end }}"{% endif %} readonly>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="freeze-date">
                <div class="row" id="freeze-date">
                    <div class="col-md-12">
                        <p>Freeze time specifies the timestamp that the competition will be frozen to.
                            All solves before the freeze time will be shown, but new solves won't be shown to
                            users. </p>
                        <sub class="text-muted text-right mb-3">* All time fields required</sub>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-month">Month:</label>
                        <input class="form-control freeze-date" id='freeze-month' min="0" max="12"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-day">Day:</label>
                        <input class="form-control freeze-date" id='freeze-day' min="0" max="31"
                               type='number'>
                    </div>

                    <div class="form-group col-md-4">
                        <label for="freeze-year">Year:</label>
                        <input class="form-control freeze-date" id='freeze-year' type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-hour">Hour:</label>
                        <input class="form-control freeze-date" id='freeze-hour' min="0" max="23"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-minute">Minute:</label>
                        <input class="form-control freeze-date" id='freeze-minute' min="0"
                               max="59" type='number'>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze-timezone">Timezone:</label>
                        <select class="form-control custom-select freeze-date" id="freeze-timezone">
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze-local">Local Time:</label>
                        <input class="form-control" id='freeze-local' type='text'
                               placeholder="Freeze Date (Local Time)" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze-zonetime">Timezone Time:</label>
                        <input class="form-control" id='freeze-zonetime' type='text'
                               placeholder="Freeze Date (Timezone Time)" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze">UTC Timestamp:</label>
                        <input class="form-control" id='freeze' name='freeze' type='number'
                               placeholder="Freeze Date (UTC timestamp)"
                               {% if freeze is defined and freeze != None %}value="{{ freeze }}"{% endif %} readonly>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-md btn-primary float-right">Update</button>
    </form>
</div>

{% else %}
<div role="tabpanel" class="tab-pane config-section" id="ctftime">
    <form method="POST" autocomplete="off" class="w-100">
        <ul class="nav nav-tabs mb-3">
            <li class="nav-item">
                <a class="nav-link active" href="#start-date" aria-controls="start-date" role="tab" data-toggle="tab">
                    开始时间
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#end-date" aria-controls="end-date" role="tab" data-toggle="tab">
                    结束时间
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#freeze-date" aria-controls="freeze-date" role="tab" data-toggle="tab">
                    冻结时间
                </a>
            </li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="start-date">
                <div class="row" id="start-date">
                    <div class="col-md-12">
                        <p>这是比赛开始的时间。题目将自动解锁，用户将能够提交答案。</p>
                        <sub class="text-muted text-right mb-3">* 所有时间字段均为必填项</sub>
                    </div>

                    <div class="form-group col-md-3">
                        <label for="start-year">年:</label>
                        <input class="form-control start-date" id='start-year' type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="start-month">月:</label>
                        <input class="form-control start-date" id='start-month' min="0" max="12"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="start-day">日:</label>
                        <input class="form-control start-date" id='start-day' min="0" max="31"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="start-hour">小时:</label>
                        <input class="form-control start-date" id='start-hour' min="0" max="23"
                               type='number'>
                    </div>

                    <div class="form-group col-md-3">
                        <label for="start-minute">分钟:</label>
                        <input class="form-control start-date" id='start-minute' min="0" max="59"
                               type='number'>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="start-timezone">时区:</label>
                        <select class="form-control custom-select start-date" id="start-timezone">
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="start-local">当地时间:</label>
                        <input class="form-control" id='start-local' type='text'
                               placeholder="开始日期（当地时间）" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="start-zonetime">时区时间:</label>
                        <input class="form-control" id='start-zonetime' type='text'
                               placeholder="开始日期（时区时间）" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label>世界标准时间 (UTC) 时间戳:</label>
                        <input class="form-control" id='start' name='start' type='number'
                               placeholder="开始日期（UTC 时间戳）"
                               {% if start is defined and start != None %}value="{{ start }}"{% endif %} readonly>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="end-date">
                <div class="row" id="end-date">
                    <div class="col-md-12">
                        <p>这是比赛结束的时间。 题目的提交功能将自动关闭，用户将无法提交答案。</p>
                        <sub class="text-muted text-right mb-3">* 所有时间字段均为必填项</sub>
                    </div>

                    <div class="form-group col-md-4">
                        <label for="end-year">年:</label>
                        <input class="form-control end-date" id='end-year' type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-month">月:</label>
                        <input class="form-control end-date" id='end-month' min="0" max="12"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-day">日:</label>
                        <input class="form-control end-date" id='end-day' min="0" max="31"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-hour">小时:</label>
                        <input class="form-control end-date" id='end-hour' min="0" max="23"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="end-minute">分钟:</label>
                        <input class="form-control end-date" id='end-minute' min="0"
                               max="59" type='number'>
                    </div>

                    <div class="form-group col-md-12">
                        <div class="form-check pl-0">
                            <label>
                                <input id="view_after_ctf" name="view_after_ctf" type="checkbox" {% if view_after_ctf %}checked{% endif %}>
                                允许赛后查看题目
                                <small class="form-text text-muted">
                                    允许在结束时间后查看题目，但不会记录新提交的内容。<br>
                                    为了使参与者能够在结束时间后提交但不能更改记分板，请将冻结时间配置为您的结束时间。
                                </small>
                            </label>
                        </div>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end-timezone">时区:</label>
                        <select class="form-control custom-select end-date" id="end-timezone">
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end-local">当地时间:</label>
                        <input class="form-control" id='end-local' type='text'
                               placeholder="结束日期（当地时间）" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end-zonetime">时区时间:</label>
                        <input class="form-control" id='end-zonetime' type='text'
                               placeholder="结束日期（时区时间）" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="end">世界标准时间 (UTC) 时间戳:</label>
                        <input class="form-control" id='end' name='end' type='number'
                               placeholder="结束日期（UTC 时间戳）"
                               {% if end is defined and end != None %}value="{{ end }}"{% endif %} readonly>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="freeze-date">
                <div class="row" id="freeze-date">
                    <div class="col-md-12">
                        <p>冻结时间指定比赛将被冻结的时间戳。
                            将显示冻结时间之前的所有解题记录，但不会显示新的用户解题记录。 </p>
                        <sub class="text-muted text-right mb-3">* 所有时间字段均为必填项</sub>
                    </div>

                    <div class="form-group col-md-4">
                        <label for="freeze-year">年:</label>
                        <input class="form-control freeze-date" id='freeze-year' type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-month">月:</label>
                        <input class="form-control freeze-date" id='freeze-month' min="0" max="12"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-day">日:</label>
                        <input class="form-control freeze-date" id='freeze-day' min="0" max="31"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-hour">小时:</label>
                        <input class="form-control freeze-date" id='freeze-hour' min="0" max="23"
                               type='number'>
                    </div>

                    <div class="form-group col-md-2">
                        <label for="freeze-minute">分钟:</label>
                        <input class="form-control freeze-date" id='freeze-minute' min="0"
                               max="59" type='number'>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze-timezone">时区:</label>
                        <select class="form-control custom-select freeze-date" id="freeze-timezone">
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze-local">当地时间:</label>
                        <input class="form-control" id='freeze-local' type='text'
                               placeholder="冻结日期（当地时间）" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze-zonetime">时区时间:</label>
                        <input class="form-control" id='freeze-zonetime' type='text'
                               placeholder="冻结日期（时区时间）" readonly>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="freeze">世界标准时间 (UTC) 时间戳:</label>
                        <input class="form-control" id='freeze' name='freeze' type='number'
                               placeholder="冻结日期（UTC 时间戳）"
                               {% if freeze is defined and freeze != None %}value="{{ freeze }}"{% endif %} readonly>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-md btn-primary float-right">更新</button>
    </form>
</div>

{% endif %}
